<template>
  <a-popover position="br" :popup-visible="carModelPopupVisible" :popup-container="popupContainer">
    <div @click="carPopupToggleFn">
      <slot :disabled="disabled">
        <a-button :disabled="disabled">查看车型信息</a-button>
      </slot>
    </div>
    <template #content>
      <div class="car-model-popup-wrapper">
        <div class="car-model-title flex justify-between">
          <div class="title-text">车型详情</div>
          <div class="close-icon" @click="carPopupToggleFn('close')">
            <icon-close />
          </div>
        </div>
        <a-descriptions class="car-model-descriptions" bordered :column="1">
          <a-descriptions-item label="品牌">{{ carModelPopupDetail?.brandName }}</a-descriptions-item>
          <a-descriptions-item label="车系">{{ carModelPopupDetail?.seriesName }}</a-descriptions-item>
          <a-descriptions-item label="车型">{{ carModelPopupDetail?.modelName }}</a-descriptions-item>
          <a-descriptions-item label="年款">{{ carModelPopupDetail?.yearStyleName }}</a-descriptions-item>
          <a-descriptions-item label="排量">{{ carModelPopupDetail?.outputVolume }}</a-descriptions-item>
          <a-descriptions-item label="变速箱">{{ carModelPopupDetail?.gearboxTypeStr }}</a-descriptions-item>
          <a-descriptions-item label="车型分类">{{ carModelPopupDetail?.sortName }}</a-descriptions-item>
        </a-descriptions>
      </div>
    </template>
  </a-popover>
</template>

<script setup name="CarModelPopUp">
  import { ref } from 'vue'
  import { getCarModelDetail } from '@/api/asset/carModel.js'

  const props = defineProps({
    disabled: Boolean,
    popupContainer: String,
    modelId: String,
  })

  // 车型 popup visible
  const carModelPopupVisible = ref(false)
  const carModelPopupDetail = ref(null)
  const carPopupToggleFn = (operateType) => {
    if (!props.disabled) {
      if (operateType == 'close') {
        carModelPopupVisible.value = false
      } else {
        // 打开时需要请求接口
        if (!carModelPopupVisible.value) {
          getCarModelDetail({ id: props.modelId }).then((res) => {
            let result = res.result
            let sortList = result.sortList
            if (sortList && sortList.length > 0) {
              let sortNameList = sortList.map((item) => {
                return item.sortName
              })
              result.sortName = sortNameList.join('；')
            }
            carModelPopupDetail.value = result
          })
        }
        carModelPopupVisible.value = !carModelPopupVisible.value
      }
    }
  }

  const closePopup = () => {
    carPopupToggleFn('close')
  }
  defineExpose({
    closePopup,
  })
</script>

<style lang="less" scoped>
  .car-model-descriptions {
    :deep(.arco-descriptions-row .arco-descriptions-item-label:not(:empty)::after) {
      content: '';
    }
    :deep(.arco-descriptions-row .arco-descriptions-item-label) {
      width: 120px;
    }
    :deep(.arco-descriptions-row .arco-descriptions-item-value) {
      width: 212px;
    }
  }

  .car-model-popup-wrapper {
    padding: 4px 8px 12px;
    .close-icon {
      cursor: pointer;
    }
    .car-model-title {
      margin-bottom: 12px;
    }
  }
</style>
